<template>
  <div class="content">

    <el-form :inline="true" :model="queryForm" class="form-inline">
     

      <el-form-item label="学生名字">
        <el-select v-model="queryForm.userId" placeholder="请选择" clearable >
          <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="loadRateOfLearningList">查询</el-button>
      </el-form-item>
    </el-form>
    

    
    <el-table :data="RateOfLearningList" stripe>
      <el-table-column prop="userName" label="姓名" />
      <el-table-column prop="word" label="单词" />
      

      <el-table-column label="单词速记" width="100">
        <template #default="scope">
          <div class="table-column-status" :class="{ 'stop-use': scope.row.justVocabulary == '0' }">
            {{ scope.row.justVocabulary == '0' ? '未学' : '已学' }}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="词义练习" width="100">
        <template #default="scope">
          <div class="table-column-status" :class="{ 'stop-use': scope.row.wordMeaningPractice == '0' }">
            {{ scope.row.wordMeaningPractice == '0' ? '未学' : '已学' }}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="拼写练习" width="100">
        <template #default="scope">
          <div class="table-column-status" :class="{ 'stop-use': scope.row.orthographicExercise == '0' }">
            {{ scope.row.orthographicExercise == '0' ? '未学' : '已学' }}
          </div>
        </template>
      </el-table-column>
      

      

    </el-table>

    <div style="margin-top: 10px;">
      <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
      />
    </div>
  </div>

</template>

<script setup>  
import { reactive, ref } from "vue";  
import { getUserList} from "@/api/user";
import { getRateOfLearningList } from "@/api/RateOfLearning";  
import { ElMessage, ElMessageBox } from 'element-plus'; 

const queryForm = reactive({ userId: null, page: 1, pageSize: 10 });  
  
let RateOfLearningList = reactive([]); 
let userList = reactive([]);  
let total = ref(0);  

// 加载全部菜品分类  
getUserList().then(resp => {  
  userList.push(...resp.data);  
});  

// 定义方法  
const loadRateOfLearningList = () => {  
  // 准备数据  
  getRateOfLearningList(queryForm).then(resp => {  
    if (resp.msg === '成功') {  
      RateOfLearningList.length = 0;  
      RateOfLearningList.push(...resp.data);  
      total.value = resp.total;  
    } else {  
      // 处理错误情况  
      RateOfLearningList.length = 0;  
      total.value = 0;  
      ElMessage.error(resp.msg);  
    }  
  }).catch(error => {  
    // 处理请求错误  
    RateOfLearningList.length = 0;  
    total.value = 0;  
    ElMessage.error('加载学习进度失败');  
    console.error('加载学习进度出错:', error);  
  });  
};
  
const handleSizeChange = (pageSize) => {  
  queryForm.pageSize = pageSize;  
  loadRateOfLearningList();  
}  
  
const handlePageChange = (page) => {  
  queryForm.page = page;  
  loadRateOfLearningList();  
}  
  
loadRateOfLearningList();  
</script>

<style scoped>
</style>
